<template>
    <section class="jumbotron">
        <h3 class="jumbotron-heading">Search Github Users</h3>
        <div>
            <input type="text" placeholder="enter the name you search" v-model="userName" @keydown.enter="searchUser" />
            &nbsp;<button @click="searchUser">Search</button>
        </div>
    </section>
</template>

<script>
import axios from "axios"
export default {
    name: "Search",
    data() {
        return {
            userName: "",
        }
    },
    methods: {
        searchUser() {
            var dataObj = { fristSearch: false, loading: true, errorMsg: "", users: [] }
            this.$bus.$emit("updateListData", dataObj)
            axios.get(`https://api.github.com/search/users?q=${this.userName}`)
                .then(res => {
                    dataObj.users = res.data.items
                    dataObj.loading = false
                    this.$bus.$emit("updateListData", dataObj)
                }).catch(error => {
                    console.log("error", error)
                    dataObj.errorMsg = error.message
                    dataObj.loading = false
                    this.$bus.$emit("updateListData", dataObj)
                })

        }
    },
    beforeDestroy() {
        this.$bus.$off("updateListData")
    }
}
</script>

<style></style>